<template>
  <div class="app-user">
    <h3>会员储值</h3>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange">
      <el-tab-pane :label="statusOption['1']" name="1">
        <Query
          :items="queryColumns"
          :initial-params="queryParams"
          @query="handleQuery"
        />
        <Table
          :table-columns="tableColumns"
          :table-loading="tableLoading"
          :table-data="tableData"
          :total="total"
          :showIndex="true"
          @pagination="handlePagination"
        >
          <template v-slot:tools>
            <el-button-group>
              <el-button type="primary" @click="handleAdd">添加规则</el-button>
            </el-button-group>
          </template>
          <template #headImg="scope">
            <img v-if="scope.row.headImg" :src="scope.row.headImg" style="width: 50px;height: 50px;border-radius: 50%;" alt="">
          </template>
          <template #status="scope">
            <el-tag :type="scope.row.status === 1 ? 'primary' : 'danger'">{{ scope.row.status === 1 ? '正常' : scope.row.status === 0 ? '注销' : '锁定'}}</el-tag>
          </template>
          <template #sex="scope">
            {{ scope.row.sex === 1 ? '男' : scope.row.sex === 2 ? '女' : '未知'}}
          </template>
          <template #opt="scope">
            <el-button type="primary" link @click="changeValue(scope.row)">编辑</el-button>
          </template>
        </Table>
      </el-tab-pane>
      <el-tab-pane :label="statusOption['2']" name="2">
        <Query
          :items="queryColumns2"
          :initial-params="queryParams2"
          @query="handleQuery2"
        />
        <Table
          :table-columns="tableColumns2"
          :table-loading="tableLoading"
          :table-data="tableData2"
          :total="total2"
          :showIndex="true"
          @pagination="handlePagination2"
        >
          <template #headImg="scope">
            <img v-if="scope.row.headImg" :src="scope.row.headImg" style="width: 50px;height: 50px;border-radius: 50%;" alt="">
          </template>
          <template #status="scope">
            <el-tag :type="scope.row.status === 1 ? 'primary' : 'danger'">{{ scope.row.status === 1 ? '正常' : scope.row.status === 0 ? '注销' : '锁定'}}</el-tag>
          </template>
          <template #sex="scope">
            {{ scope.row.sex === 1 ? '男' : scope.row.sex === 2 ? '女' : '未知'}}
          </template>
          <template #opt="scope">
            <el-button :type="scope.row.status === 1 ? 'danger' : 'primary'" link @click="changeValue(scope.row)">{{ scope.row.status === 1 ? '锁定' : '恢复' }}</el-button>
          </template>
        </Table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog v-model="showDialog" :title="dialogTitle" width="600">
      <el-form ref="refForm" :model="formData" size="default">
        <el-form-item label="活动名称" label-width="100px" required>
          <el-input v-model="formData.classifyName" :maxlength="20" show-word-limit placeholder="请输入活动名称" autocomplete="off" />
        </el-form-item>
        <el-form-item label="充值满足条件" label-width="100px">
          <div>大于金额<el-input v-model="formData.classifyName" :maxlength="20" show-word-limit placeholder="请输入活动名称" autocomplete="off" /></div>
          <div>小于金额<el-input v-model="formData.classifyName" :maxlength="20" show-word-limit placeholder="请输入活动名称" autocomplete="off" /></div>
        </el-form-item>
        <el-form-item label="赠送金额" label-width="100px" required>
          <el-input v-model="formData.classifyName" :maxlength="20" show-word-limit placeholder="请输入赠送金额" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态" label-width="100px">
          <el-radio-group v-model="formData.isParent">
            <el-radio :value="1">显示</el-radio>
            <el-radio :value="2">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false" size="default">取消</el-button>
          <el-button type="primary" @click="handleSubmit" size="default">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="user">
import Table from "@/components/Table/index.vue";
import Query from "@/components/Query/index.vue";
import { appUserList } from "@/api/member";
const { proxy } = getCurrentInstance()
const tableData = ref([])
const tableData2 = ref([])
const total = ref(0)
const total2 = ref(0)
const tableLoading = ref(true)
const loading = ref(false)
const showDialog = ref(false)
const activeName = ref('1')
const statusOption = reactive({
  '1':'储值活动规则',
  '2':'储值记录',
})
const data = reactive({
 tableColumns: [
   { label: "活动名称", prop: "nickname", },
   { label: "充值满足条件", prop: "headImg", slot: 'headImg' },
   { label: "赠送金额", prop: "phone" },
   { label: "状态",  prop: "status", slot: 'status'},
   { label: "操作",  prop: "opt", slot: 'opt'},
 ],
 queryColumns: [
 ],
 pageParams: {
  current: 1,
  size: 10
 },
 queryParams: {},
 formItems: [
 ],
 tableColumns2: [
   { label: "支付订单号", prop: "nickname", },
   { label: "支付方式", prop: "headImg", slot: 'headImg' },
   { label: "支付金额", prop: "phone" },
   { label: "用户昵称", prop: "phone" },
   { label: "用户手机号", prop: "phone" },
   { label: "充值时间",  prop: "status", slot: 'status'},
 ],
 queryColumns2: [
   { label: '用户昵称', prop: 'nickname', type: 'input', attrs: { placeholder: '请输入用户昵称' } },
   { label: '用户手机号', prop: 'phone', type: 'input',  attrs: { placeholder: '请输入手机号' } },
 ],
 pageParams2: {
  current: 1,
  size: 10
 },
 queryParams2: {},
 formItems2: [
 ]
})
const handleChange = (tab, event) => {
  queryParams.value.current = 1
  console.log(tab, event)
}

const { tableColumns, queryColumns, pageParams, queryParams,tableColumns2, queryColumns2, pageParams2, queryParams2 } = toRefs(data)
/** 获取列表数据 */
const getList = () => {
  tableLoading.value = true
  const data  = {
     ...queryParams.value,
     ...pageParams.value
  }
  appUserList(data)
   .then(res => {
       tableData.value = res.data.records
       total.value = res.data.total
   })
   .finally(() => {
       tableLoading.value = false
   })
}
getList()
/** 获取列表数据 */
const getList2 = () => {
  tableLoading.value = true
  const data  = {
     ...queryParams2.value,
     ...pageParams2.value
  }
  appUserList(data)
   .then(res => {
       tableData2.value = res.data.records
       total2.value = res.data.total
   })
   .finally(() => {
       tableLoading.value = false
   })
}
getList2()
/** 搜索按钮操作 */
const handleQuery = (val) => {
 queryParams.value = val
 getList()
}

const handlePagination = (val) => {
 pageParams.value = val
 getList()
}
/** 搜索按钮操作 */
const handleQuery2 = (val) => {
 queryParams2.value = val
 getList2()
}

const handlePagination2 = (val) => {
 pageParams2.value = val
 getList2()
}

const formData = ref({})
const dialogTitle = ref('')

/** 打开新增弹窗 */
const handleAdd = () => {
  dialogTitle.value = '添加分类'
  // 重置表单数据
  formData.value = {
    classifyName: '',
    level: 1,
    isParent:1,
    parentId:'',
    img:''
  }
  showDialog.value = true
}
const handleSubmit = async (data) => {
 loading.value = true
 try {
   // 这里调用API进行提交
   await saveUser(data)
   await new Promise(resolve => setTimeout(resolve, 1000))
   showDialog.value = false
   getList()
   proxy.$modal.msgSuccess("操作成功")
 } finally {
   loading.value = false
 }
}
const changeValue = (row) => {
 proxy.$modal.confirm(`是否确认${row.status === 1 ? '锁定' : '解锁'}此用户？`)
 .then(() => {
   saveUser({ id: row.id, account: row.account, status: row.status === 1 ? 2 : 1})
   .then(() => {
     proxy.$modal.msgSuccess("操作成功")
     getList()
   })
 })
}

</script>
<style lang="scss">
.app-user {
 padding: 8px;
}
</style>